<template>
  <div class="content">
    <div class="styleBanner">
      <div class="box" v-for="item in contentList.sceneLightShoppingGuideModule" :key="item.title">
        <h3>{{item.styleItem.title}}</h3>
        <p>{{item.styleItem.desc}}</p>
        <div>
          <img v-for="it in item.styleItem.itemPicBeanList.slice(0,2)" :key="it.itemId" :src="it.picUrl" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['contentList'],
  mounted () {
    console.log(this.$props.contentList)
  }
}
</script>

<style lang='less' scoped>
.styleBanner{
  height: 3.1rem;
  padding: .1rem .3rem .3rem .26rem;
  display: flex;
  justify-content: space-between;
  .box{
    width: 3.43rem;
    background-color: #f5f5f5;
    padding: .2rem 0 0 .2rem;
    h3{
      font-weight: 900;
    }
    p{
      font-size: .24rem;
      color:rgb(128, 55, 211);
    }
    div{
      display: flex;
      img{
        width: 1.5rem;
        height: 1.5rem;
      }
    }
  }
  .box:nth-child(2) p{
    color: rgb(244, 143, 24);
  }
}
</style>
